<template>
  <div class="p20">
    <div class="p20">
      <!-- 确认框 -->
      <el-button type="primary" @click="confirm">确认框</el-button>
      <el-button type="primary" @click="confirmRed">确认框-红色按钮</el-button>
    </div>
    <div class="p20">
      <!-- 导入 -->
      <el-button type="primary" @click="importWin.show = true">导 入</el-button>
      <Import :win="importWin" api="https://jsonplaceholder.typicode.com/posts/" :data="{}" :fileSize="5" template="/xxx/xxx" />
    </div>
    <div class="p20">
      <!-- 表单弹框 -->
      <el-button type="primary" @click="formWin1.show = true">表单1列</el-button>
      <el-button type="primary" @click="formWin2.show = true">表单2列</el-button>
      <el-button type="primary" @click="formWin3.show = true">表单3列 + 表格表单 + 表单验证</el-button>
      <Form370 @callback="() => {}" :params="formWin1" />
      <Form715 @callback="() => {}" :params="formWin2" />
      <Form1060 @callback="() => {}" :params="formWin3" />
    </div>
  </div>
</template>

<script>
import confirm from '@/components/dialog/confirm'
import Import from '@/components/dialog/import'
import Form370 from './form370.vue'
import Form715 from './form715.vue'
import Form1060 from './form1060.vue'

export default {
  components: {
    Import,
    Form370,
    Form715,
    Form1060
  },
  data() {
    return {
      importWin: {
        show: false
      },
      formWin1: {
        show: false
      },
      formWin2: {
        show: false
      },
      formWin3: {
        show: false
      }
    }
  },
  methods: {
    /**
     * 确认框
     */
    confirm() {
      confirm('弹框内容').then(() => {
        // 确认执行的代码
      }).catch(() => {})
    },
    /**
     * 确认框，红色按钮
     */
    confirmRed() {
      confirm('弹框内容', '确定删除', true).then(() => {
        // 确认执行的代码
      }).catch(() => {})
    }
  }
}
</script>
